<template>
  <div>
    <el-table border style="width: 100%" :data="families">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="idno" label="身份证" />
      <el-table-column prop="gender" label="性别">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.gender" :value="scope.row.gender" />
        </template>
      </el-table-column>
      <el-table-column prop="birthday" label="出生日期" />
      <el-table-column prop="whcd" label="文化程度">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.whcd" :value="scope.row.whcd" />
        </template>
      </el-table-column>
      <el-table-column prop="jtdz" label="家庭地址" />
      <el-table-column prop="dwyzy" label="单位与职业" />
      <el-table-column prop="xhgx" label="相互关系" />
      <el-table-column prop="lxdh" label="联系电话" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['user:sjsk:edit']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button
            v-hasPermi="['user:sjsk:remove']"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0; text-align: center">
      <el-button type="primary" size="mini" @click="openFamilyModal"
        >新增成员</el-button
      >
    </div>
    <FamilyModal ref="familyModalRef" @data-updated="loadFamilies" />
  </div>
</template>
<script>
import { getFamilysByUserId, delFamily, getFamily } from "@/api/user/family";
import FamilyModal from "./familyModal.vue";
export default {
  dicts: ["whcd", "gender"],
  components: {
    FamilyModal,
  },
  props: {
    typeId: {
      type: String,
    },
  },
  data() {
    return {
      families: [],
    };
  },
  watch: {
    typeId: {
      immediate: true,
      handler(newV) {
        if (newV) {
          this.families = [];
          this.loadFamilies();
        }
      },
    },
  },
  methods: {
    openFamilyModal() {
      this.$refs["familyModalRef"].openModal(this.typeId);
    },
    loadFamilies() {
      getFamilysByUserId(this.typeId).then((res) => {
        this.families = res.data;
      });
    },
    handleUpdate(row) {
      this.$refs["familyModalRef"].openModal(this.typeId, row.familyId);
    },
    handleDelete(row) {
      const familyIds = row.familyId;
      this.$modal
        .confirm('是否确认删除家庭成员编号为"' + familyIds + '"的数据项？')
        .then(() => {
          return delFamily(familyIds);
        })
        .then(() => {
          this.loadFamilies();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {})
        .finally(() => {});
    },
  },
};
</script>
